import { useRef, useEffect, forwardRef } from "react";

const InputWithRef = forwardRef(function InputWithRef(props, ref) {
    return (
        <div>
            <input ref={ref} type="text" />
        </div>
    );
});

function ForwardRefExample() {
    const inputRef = useRef(null);

    useEffect(() => {
        console.log('inputRef useEffect中执行的', inputRef);
        inputRef.current.focus();
    }, []);

    return (
        <div>
            <InputWithRef ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>焦点</button>
        </div>
    );
}

export default ForwardRefExample;